<template>
    <div style="background-color: aqua;">
        <h1>slot插槽</h1>
        <SonSlot></SonSlot>
        <h3>插槽用于决定父组件将随携带的数据内容，插入到子组件指定的某个位置，
            从而使模块分块，具有模块化的特质和更大的重用性
        </h3>
        <h2>1.默认插槽</h2>
        <h3>默认插槽是在组件模板中定义的，它允许父组件将内容传递给子组件</h3>
        <h3>使用方法:在子组件模板中使用特殊的slot标签，就可以为子组件开启一个插槽,
            然后在父组件中，将需要传递的内容放在子组件标签内部即可
        </h3>
        <h3>插入在子组件标签里面的内容口将替换子组件s1ot标签以及它的内容</h3>
        <SonSlot>
            <template v-slot:default>
                <div>
                    我是父组件是现在子组件内部的议容
                </div>
            </template>
        </SonSlot>
        <h2>2.具名插槽</h2>
        <h3>v-slot指令将内容定向到指定名字的插槽;v-slot简写成#</h3>
        <SonSlot>
            <template v-slot:btn>
                <div>
                    <span style="background-color: aquamarine;">张三</span>
                </div>
            </template>
            <template #msg>
                <div>
                    <span>很棒</span>
                </div>
            </template>
        </SonSlot>
        <h3>3.作用域插槽</h3>
        <h2>在封装组件时，为预留的s1ot提供属性对应值，这种用法叫做作用域插槽</h2>
        <SonSlot>
            <template v-slot:default>
                <div>
                    商品展示
                </div>
            </template>
            <template #btn>
                <div>
                    商品名称
                </div>
            </template>
            <template #msg>
                <div>
                    商品简介
                </div>
            </template>
            <template #img="{scope}">
                <div>
                    <img :src="scope" alt="">
                </div>
            </template>
        </SonSlot>
    </div>
</template>
<script>
import SonSlot from '@/components/SonSlot.vue';
export default {
    components:{
        SonSlot
    }
}
</script>